<template>
	<up-dropdown-item :title="dropItemTitle">
		<!-- 区域筛选 -->
		<view class="dropdown-content area-select">
			<view class="filter-content">
				<!-- 左侧菜单 -->
				<scroll-view scroll-y class="left-menu">
					<view
						v-for="(item, index) in data"
						:key="index"
						class="menu-item"
						:class="{ active: activeAreaId == item.id }"
						@click="changeArea(item.id)"
					>
						{{ item.name }}
					</view>
				</scroll-view>

				<!-- 右侧内容 -->
				<scroll-view scroll-y class="right-content">
					<view
						v-for="scenic in scenicOfArea"
						:key="scenic.id"
						:class="['right-item', { selected: selectScenicIds.includes(scenic.id.toString()) }]"
						@click="selectScenic(scenic.id)"
					>
						<text class="flex-1 mr-24">{{ scenic.name }}</text>
						<image
							v-if="selectScenicIds.includes(scenic.id.toString())"
							:src="imgBaseUrl + 'icon-check.png'"
							class="icon-40"
						/>
						<image v-else :src="imgBaseUrl + 'icon-uncheck.png'" class="icon-40" />
					</view>
				</scroll-view>
			</view>
			<!-- 底部按钮 -->
			<view class="bottom-bd-top p-24 flex">
				<zjy-button pd="60" type="line" @click="reset">重置</zjy-button>
				<view class="ml-18 flex-1">
					<zjy-button @click="submit">
						<text>确认筛选</text>
						<text v-if="selectScenicLength">{{ selectScenicLength }}个景区</text>
					</zjy-button>
				</view>
			</view>
		</view>
	</up-dropdown-item>
</template>
<script setup lang="ts">
const props = defineProps({
	modelValue: String,
	title: String,
	data: {
		type: Array as PropType<any[]>,
		default: [],
	},
})
const emit = defineEmits(["update:modelValue", "updateValue", "close"])
const imgBaseUrl = inject("imgBaseUrl")
const defaultScenicId = "-1"
const activeAreaId = ref("")
watch(
	() => props.data,
	() => {
		activeAreaId.value = props.data[0].id
	},
	{
		immediate: true,
	}
)
const selectScenicIds = computed({
	get() {
		return props.modelValue ? props.modelValue?.split(",") : [defaultScenicId]
	},
	set(newValue) {
		emit("update:modelValue", newValue.join(","))
		emit(
			"updateValue",
			newValue.filter((value) => value !== defaultScenicId)
		)
	},
})

//切换区域
const changeArea = (id: string) => {
	activeAreaId.value = id
}
//计算区域对应的景区列表
const scenicOfArea = computed(() => {
	return props.data.find((area: any) => area.id == activeAreaId.value)?.resorts || []
})
//计算已选景区数量
const selectScenicLength = computed(() => {
	return selectScenicIds.value.filter((scenicId) => scenicId != defaultScenicId).length
})
//选择景区 选中或取消选中
const selectScenic = (id: string) => {
	let newSelectIds = [...selectScenicIds.value]
	let findIndex = newSelectIds.indexOf(id.toString())
	if (findIndex > -1) {
		if (id == defaultScenicId) {
			//无法直接取消"不限区域"
			return
		}
		newSelectIds.splice(findIndex, 1)
		if (newSelectIds.length == 0) {
			newSelectIds = [defaultScenicId]
		}
	} else {
		if (id == defaultScenicId) {
			//选择"不限区域" 取消其他选择
			newSelectIds = [defaultScenicId]
		} else {
			//过滤掉"不限区域" 再加入选中
			newSelectIds = newSelectIds.filter((scenicId) => scenicId != defaultScenicId)
			newSelectIds.push(id.toString())
		}
	}
	selectScenicIds.value = newSelectIds
}
const dropItemTitle = computed(() => {
	if (selectScenicIds.value.length > 1) {
		return "多选"
	}
	if (selectScenicIds.value[0] == defaultScenicId) {
		return props.title
	}
	let selectItemName = ""
	props.data.map((area) => {
		let findName = area.resorts.find((item: any) => item.id == selectScenicIds.value[0])?.name
		if (findName) {
			selectItemName = findName
		}
	})
	return selectItemName
})
//重置
const reset = () => {
	selectScenicIds.value = [defaultScenicId]
	activeAreaId.value = props.data[0].id
	submit()
}
//确认
const submit = () => {
	emit("close")
}
</script>
<style lang="scss" scoped>
.area-select {
	.filter-content {
		display: flex;
		overflow: hidden;
		height: 672rpx;

		.left-menu {
			width: 176rpx;
			height: 100%;
			background: $grey;

			.menu-item {
				display: flex;
				align-items: center;
				padding: 32rpx;
				font-size: 28rpx;
				position: relative;

				&.active {
					background: #fff;
					font-weight: 500;
				}
			}
		}

		.right-content {
			flex: 1;
			height: 100%;
			background: #fff;
			padding: 0 24rpx;

			.right-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 32rpx 0;
				font-size: 28rpx;
				color: #4e5969;
				border-bottom: 1rpx solid #e9eaee;

				&.selected {
					color: $brown-bc;
				}
			}
		}
	}
}
</style>
